<form nz-form #f="ngForm">
  <div se-container="1">
    <se label="角色名称" required>
      <input nz-input [(ngModel)]="record.roleName" name="roleName" required />
    </se>
    <se label="角色编码" required>
      <input nz-input [(ngModel)]="record.roleCode" name="roleCode" required />
    </se>
    <se label="角色描述">
      <input nz-input [(ngModel)]="record.roleDesc" name="roleDesc" />
    </se>
    <se [label]="authLabelTpl" required>
      <ng-template #authLabelTpl>
        <label>
          数据权限
          <i nz-popover [nzPopoverContent]="lineHelpTpl" nz-icon nzType="question-circle"></i>
          <ng-template #lineHelpTpl>
            <div>限定角色可以查看哪些部门数据，仅当数据表存在部门字段时有效！</div>
            <div><strong>无限制：</strong>没有限制，可以查看所有部门数据</div>
            <div><strong>自定义：</strong>自行选择要查看的部门数据</div>
            <div><strong>本部门及子部门：</strong>可以查看自己所属部门数据，且【包含】子部门</div>
            <div><strong>本部门：</strong>可以查看自己所属部门数据，但【不含】子部门</div>
          </ng-template>
        </label>
      </ng-template>
      <nz-select [(ngModel)]="record.dsType" name="type">
        <nz-option nzLabel="无限制" [nzValue]="0"></nz-option>
        <nz-option nzLabel="自定义" [nzValue]="1"></nz-option>
        <nz-option nzLabel="本部门及子部门" [nzValue]="2"></nz-option>
        <nz-option nzLabel="本部门" [nzValue]="3"></nz-option>
      </nz-select>
      <a *ngIf="record.dsType===1 && dsScopes.length === 0" (click)="openDepts()" href="javascript:void(0)"
        class='brand-color'>选择数据部门</a>
      <span *ngIf="record.dsType===1 && dsScopes.length !== 0">
        <nz-tag *ngFor="let tag of dsScopes">{{tag.label}}</nz-tag>
        <nz-tag (click)="openDepts()"><i nz-icon nzType="setting" nzTheme="outline"></i></nz-tag>
      </span>
    </se>
  </div>
</form>

<div class="drawer-footer">
  <button nz-button [nzType]="'default'" (click)="close()">
    关闭
  </button>
  <button nz-button [nzType]="'primary'" [disabled]="f.invalid" [nzLoading]="http.loading" (click)="ok()">
    保存
  </button>
</div>

<nz-drawer [nzWidth]="384" [nzClosable]="false" [nzVisible]="deptsVisible" nzTitle="选择数据部门" (nzOnClose)="closeDepts()">
  <nz-input-group [nzSuffix]="suffixIcon">
    <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue" />
  </nz-input-group>
  <ng-template #suffixIcon>
    <i nz-icon nzType="search"></i>
  </ng-template>
  <div class="treeArea" style="margin-top: 8px; max-height: 600px; overflow: auto; border: 1px solid #ddd">
    <ng-template #iconTpl>
      <img style="width: 64px; height: 41px;" src="./assets/svg/nodata.svg">
    </ng-template>
    <nz-empty class="ant-empty-small" *ngIf="nodes.length === 0" [nzNotFoundImage]="iconTpl"></nz-empty>

    <nz-tree #deptTree [nzHideUnMatched]="true" [nzData]="nodes" [nzSearchValue]="searchValue" nzCheckable
      [nzShowLine]="true" [nzCheckStrictly]="true" [nzDraggable]="false" [nzExpandAll]="true"
      [nzCheckedKeys]="defaultSelectedKeys" (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)"
      (nzSearchValueChange)="nzEvent($event)">
    </nz-tree>
  </div>

  <div class="drawer-footer">
    <button nz-button [nzType]="'default'" (click)="closeDepts()">
      关闭
    </button>
    <button nz-button [nzType]="'primary'" (click)="submitDepts()">
      确定
    </button>
  </div>
</nz-drawer>
